<template>
  <div class="backgroundMap">
    <Button type="primary" class="createBtn" @click="createBg">新增模板</Button>
    <div class="qie">
      <Tabs :value="tabVal" type="card" @on-click="tabValChange">
        <TabPane label="上架列表" name="1"></TabPane>
        <TabPane label="下架列表" name="2"></TabPane>
      </Tabs>
      <dt-grid ref="table" :page="page" :onFetch="onFetch" />
    </div>
    <create-bg ref="createBg" @success="success" @onPreview="onPreview"></create-bg>
    <preview-image
      :images="preViewImg"
      :showDownLoad="showDownLoad"
      :showIndex="showIndex"
      ref="preViewImage"></preview-image>
    <screen-temp ref="screenTemp" v-if="modalTempFlag" @uploadSuccess="uploadSuccess"></screen-temp>
    <dt-loading :loading="loading"></dt-loading>
  </div>
</template>
<script>
  import columnOpt from './opt/column.js'
  import createBg from './components/createBg.vue'
  import bgMapMgr from '@/biz/bgMap/bgMap'
  import screenTemp from '@/components/screenTemp/screenTemp.vue'
  export default {
    components: {
      createBg,
      screenTemp
    },
    data() {
      return {
        loading: false,
        tabVal: '1',
        columns: [],
        page: {
          total: 0
        },
        preViewImg: [],
        showIndex: 0,
        showDownLoad: false,
        modalTempFlag: false,
        sortCaseVal: {}
      }
    },
    created() {},
    mounted() {
      this.$refs.table.init(this, new columnOpt(this, 1))
      this.$refs.table.fetch()
    },

    methods: {
      uploadSuccess(val) {
        if (val != 'success' && val != false) {
          this.loading = false
          this.modalTempFlag = false
          this.preViewImg = []
          this.preViewImg.push(val)
          this.$refs.preViewImage.show()
        }
      },
      // 预览
      onPreview(flag) {
        this.loading = true
        this.modalTempFlag = true
        setTimeout(() => {
          this.$refs.screenTemp.show(flag)
        }, 100)
      },

      // 列表数据
      onFetch(data) {
        if (this.tabVal == 1) {
          let params = { ...data }
          return bgMapMgr
            .templateList(params)
            .then((res) => {
              this.page.total = 0
              return res
            })
            .catch((err) => {})
        } else {
          let params = {
            ...data
          }
          return bgMapMgr
            .templatePage(params)
            .then((res) => {
              this.page.total = res.total
              return res
            })
            .catch((err) => {})
        }
      },

      success(res) {
        this.tabVal = '2'
        this.loading = false
        this.$refs.createBg.hide()
        this.modalTempFlag = false
        this.$refs.table.init(this, new columnOpt(this, this.tabVal))
        this.$refs.table.fetch()
      },
      tabValChange(val) {
        if (val == 1) {
          this.tabVal = val
          this.$refs.table.init(this, new columnOpt(this, val))
          this.$refs.table.fetch()
        } else {
          this.tabVal = val
          this.$refs.table.init(this, new columnOpt(this, val))
          this.$refs.table.fetch()
        }
      },

      seeBg(val) {
        this.preViewImg = []
        this.preViewImg.push(val)
        this.$refs.preViewImage.show()
      },

      // 上架
      upShelf(val) {
        this.$Modal.confirm({
          title: '上架',
          content: '<p>确认上架？</p>',
          onOk: () => {
            let params = {
              id: val.id,
              operate: 3
            }
            bgMapMgr.templateUpdateById(params).then((res) => {
              this.$Message.success('上架成功。')
              this.$refs.table.fetch()
            })
          }
        })
      },

      // 下架
      offShelf(val) {
        this.$Modal.confirm({
          title: '下架',
          content: '<p>确认下架？</p>',
          onOk: () => {
            let params = {
              id: val.id,
              operate: 4
            }
            bgMapMgr.templateUpdateById(params).then((res) => {
              this.$Message.success('下架成功。')
              this.$refs.table.fetch()
            })
          }
        })
      },
      // 置顶
      pinned(val) {
        this.$Modal.confirm({
          title: '置顶',
          content: '<p>确认置顶？</p>',
          onOk: () => {
            let params = {
              id: val.id,
              operate: 1
            }
            bgMapMgr.templateUpdateById(params).then((res) => {
              this.$Message.success('置顶成功。')
              this.$refs.table.fetch()
            })
          }
        })
      },
      unpinned(val) {
        this.$Modal.confirm({
          title: '取消置顶',
          content: '<p>确认取消置顶？</p>',
          onOk: () => {
            let params = {
              id: val.id,
              operate: 2
            }
            bgMapMgr.templateUpdateById(params).then((res) => {
              this.$Message.success('取消置顶。')
              this.$refs.table.fetch()
            })
          }
        })
      },

      createBg() {
        this.$refs.createBg.create(false)
      },

      //编辑
      bgEdit(val) {
        let params = {
          templateId: val.id
        }
        bgMapMgr.getTemplateById(params).then((res) => {
          this.$refs.createBg.create(true, res)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .backgroundMap {
    padding: 20px;
    .createBtn {
      margin: 10px 0;
    }
  }

  .upShelf {
    position: relative;
    z-index: 999;
    text-align: center;
    color: #fff;
    font-size: 20px;
    margin-bottom: 15px;
  }
</style>
